﻿@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section styles{
 <style>
    .uploader-list .handle {
            background-color: #eee;
            color: red;
            filter: alpha(Opacity=80);
            -moz-opacity: 0.5;
            opacity: 0.5;
            width: 240px;
            text-align: right;
        }

    .uploader-list .handle i {
        margin-right: 5px;
    }

    .uploader-list .handle i:hover {
        cursor: pointer;
    }

    .uploader-list {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 1000px;
        flex-wrap: wrap;
    }

    .uploader-list .file-iteme {
        display: flex;
        padding: 5px;
        flex-direction: column;
    }
        .trdel{
        cursor:pointer;
    }
 </style>
}
<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form" lay-filter="dictype-form" style="padding: 15px 0 0 0;">
            <input type="hidden" name="Id" value="@Model.Id" />

            <div class="layui-form-item">
                <label class="layui-form-label layui-form-required">栏目名称</label>
                <div class="layui-input-block">
                    <input type="text" name="ChannelName" lay-verify="required" placeholder="请输入栏目名称"
                           autocomplete="off" class="layui-input" value="@Model.ChannelName" maxlength="20" />

                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">栏目索引</label>
                <div class="layui-input-block">
                    <input type="text" name="IndexName" placeholder="请输入栏目索引"
                           autocomplete="off" class="layui-input" value="@Model.IndexName"  />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">栏目组</label>
                <div class="layui-input-block">
                     <div id="channelGrouplist">
                            @if (ViewBag.GroupNamesList != null)
                            {
                                foreach (var item in ViewBag.GroupNamesList)
                                {
                                    <input type="checkbox" name="GroupName" lay-skin="primary" value="@item["GroupName"]" title="@item["GroupName"]" @(item["Checked"] =="1"?"checked":"")>
                                }
                            }
                        </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">链接类型</label>
                <div class="layui-input-block">
                  <select name="LinkType" lay-verify="required" lay-filter="linktype">
                      @if(ViewBag.LinkTypeList!=null){
                          foreach (var item in ViewBag.LinkTypeList)
                            {
                                <option value="@item.Name" @(item.Name==Model.LinkType.ToString()?"selected":"") >@item.Describe</option>
                            }
                      }
                  </select>
                </div>
            </div>
            <div class="layui-form-item channelUrl" style="display:@(Model.LinkType=="LinkToChannel"?"":"none");">
                <label class="layui-form-label layui-form-required">链接栏目</label>
                <div class="layui-input-block">
                   <input id="channelcascader" name="ChannelUrl"/>

                </div>
            </div>
            <div class="layui-form-item linkurl" style="display:@(Model.LinkType=="None"?"":"none");">
                <label class="layui-form-label">外部链接</label>
                <div class="layui-input-block">
                    <input type="text" name="LinkUrl" placeholder="请输入外部链接"
                           autocomplete="off" class="layui-input" value="@Model.LinkUrl"  />
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">栏目关键字</label>
                <div class="layui-input-block">
                     <input type="text" name="Keywords" placeholder="请输入栏目关键字"
                           autocomplete="off" class="layui-input" value="@Model.Keywords"  />

                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">栏目描述</label>
                <div class="layui-input-block">
                    <textarea name="Remark" placeholder="请输入栏目描述" class="layui-textarea">@Model.Remark</textarea>
                </div>
            </div>
              <div class="layui-form-item">
                <label class="layui-form-label layui-form-required">栏目图片</label>
                <div class="layui-input-block">
                    <div class="layui-upload">
                        <button type="button" class="pear-btn pear-btn-md" id="multiplepic"><i class="icon pear-icon pear-icon-upload"></i>图片上传</button>
                        <label style="color:orangered;">请上传png、jpg、jpeg图片且大小不超过4M 。</label>
                        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                            预览图：
                            <div class="layui-upload-list uploader-list zoomImgBox" id="uploader-list">
                                @if (ViewBag.FileImagList != null)
                                {
                                    foreach (var item in ViewBag.FileImagList)
                                    {
                                        <div id="@item["id"]" class="file-iteme">
                                            <div class="handle"><i class="layui-icon layui-icon-delete"></i></div>
                                            <img class="zoomImg" style="width: 240px; height: 180px; border: none;" src="@item["fpath"]">
                                            <div class="info"></div>
                                        </div>
                                    }
                                }
                            </div>
                        </blockquote>
                    </div>
                </div>
            </div>
        
            <div class="layui-form-item">
                <label class="layui-form-label ">栏目正文</label>
                <div class="layui-input-block">
                    <textarea name="Content" id="Content" placeholder="请输入栏目正文" class="layui-textarea">@Model.Content</textarea>
                </div>
            </div>


            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn layui-hide" lay-submit lay-filter="channel-submit" id="channel-submit">提交</button>
                </div>
            </div>
        </form>
    </div>
</div>


@section scripts{

    <script type="text/javascript">
        layui.use(['lscom', 'form', 'tinymce', 'upload', 'layCascader' , 'preview'], function () {
            var $ = layui.$;
            var lscom = layui.lscom;
            var form = layui.form;
            var tinymce = layui.tinymce;
            var upload = layui.upload;
            var layCascader = layui.layCascader;
            let preview = layui.preview;
            var index = parent.layer.getFrameIndex(window.name);
            //parent.layer.iframeAuto(index);

            var edit = tinymce.render({
                elem: "#Content",
                menubar: false , 
                plugins: 'print preview searchreplace autolink fullscreen image link media code codesample table charmap hr pagebreak nonbreaking anchor advlist lists textpattern help emoticons autosave indent2em axupimgs kityformula-editor' , 
                toolbar: 'code undo redo restoredraft | cut copy | forecolor backcolor bold italic underline strikethrough link | alignleft aligncenter alignright alignjustify | bullist numlist blockquote subscript superscript removeformat | \
                    formatselect fontselect fontsizeselect | \
                    table image media charmap emoticons hr pagebreak print preview | fullscreen | indent2em lineheight axupimgs kityformula-editor' , 
                autosave_ask_before_unload: false ,
                font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats;' ,

                images_upload_url: '/Upload/UploadTinymceFile?category=channel',
                images_upload_base_path: '/',
                paste_data_images: false,
                file_picker_types: 'file media',
                height: 350,
                //自定义文件选择器的回调内容 此方法只有在点击上方图片按钮才会触发 
                file_picker_callback: function (callback, value, meta) {
                     if (meta.filetype === 'media') {
                        // 动态创建上传input，并进行模拟点击上传操作，达到本地上传视频效果。 
                        let input = document.createElement('input');
                        //创建一个隐藏的
                        input.setAttribute('type', 'file');
                        input.setAttribute("accept", ".mp4");
                        //let that = this;
                        input.onchange = function () {
                            let file = this.files[0];
                            let formData = new FormData();
                            formData.append("file", file);
                            formData.append("category", "channel");
                            var waitIndex = parent.layer.load(2);
                            lscom.ajax({
                                url: "/Upload/UploadFile",
                                data: formData,
                                lsHandleError: false,
                                processData: false,
                                contentType: false,
                            }).done(function (data) {
                                if (data.code == 0) {
                                    callback(data.data.url);
                                }
                            }).fail(function (message) {
                                parent.layer.msg(message, { icon: 5 });
                            }).always(function () {
                               parent.layer.close(waitIndex);
                            });
                        }
                        //触发点击 
                        input.click();
                    }
                     if (meta.filetype === 'file') {
                          // 动态创建上传input，并进行模拟点击上传操作，达到本地上传视频效果。 
                        let input = document.createElement('input');
                        //创建一个隐藏的
                        input.setAttribute('type', 'file');
                        input.setAttribute("accept", ".pdf");
                        //let that = this;
                        input.onchange = function () {
                            let file = this.files[0];
                            let formData = new FormData();
                            formData.append("file", file);
                            formData.append("category", "tf");
                            var waitIndex = parent.layer.load(2);
                            lscom.ajax({
                                url: "/Upload/UploadFile",
                                data: formData,
                                lsHandleError: false,
                                processData: false,
                                contentType: false,
                            }).done(function (data) {
                                if (data.code == 0) {
                                    callback(data.data.url);
                                }
                            }).fail(function (message) {
                                parent.layer.msg(message, { icon: 5 });
                            }).always(function () {
                               parent.layer.close(waitIndex);
                            });
                        }
                        //触发点击 
                        input.click();
                     }
                },
                images_upload_handler: function (blobInfo, succFun, failFun) {
                    var xhr, formData;
                    var file = blobInfo.blob();//转化为易于理解的file对象
                   
                    formData = new FormData();
                    formData.append('file', file, file.name);
                    formData.append("category", "channel");
                   
                    var waitIndex = parent.layer.load(2);
                    lscom.ajax({
                        url: "/Upload/UploadFile",
                        data: formData,
                        lsHandleError: false,
                        processData: false,
                        contentType: false,
                    }).done(function (data) {
                        if (data.code == 0) {
                            if (data.data != null && data.data.url != "") {
                                succFun(data.data.url);
                            }
                        }
                    }).fail(function (message) {
                        parent.layer.msg(message, { icon: 5 });
                    }).always(function () {
                        parent.layer.close(waitIndex);
                    });
                }
            });

            lscom.ajax({
                url: "/Cms/Channel/GetChannleCascader?channelId=0",
                type:'GET',
                lsHandleError: false
            }).done(function(data) {
                if (data.code == 0) {
                    layCascader({
                        elem: '#channelcascader',
                        options: data.data,
                        value: ('@Model.LinkType'=='LinkToChannel' ? '@Model.LinkUrl':''),
                        clearable: true
                    });
                }
            }).fail(function(message) {
                lscom.notify.error(message);
            })
            $(document).on('click', '.handle', function () {
                $(this).parent('div').remove();
            });
            preview.render({
                model: "img",
                domName: '.zoomImg'
            });
            upload.render({
                elem: '#multiplepic'
                , url: '/Upload/UploadFile?category=channel' //此处配置你自己的上传接口即可
                , multiple: false
                , size: 4096
                , accept: 'images'
                , acceptMime: 'image/jpg,image/jpeg,image/png'
                , before: function (obj) {

                }
                , done: function (res) {
                    //上传完毕
                    $('#uploader-list').append(
                        '<div id="' + res.data.id + '" class="file-iteme">' +
                        '<div class="handle"><i class="layui-icon layui-icon-delete"></i></div>' +
                        '<img class="zoomImg" style="width: 240px; height: 180px; border: none;" src=' + res.data.url + '>' +
                        '<div class="info"></div>' +
                        '</div>'
                    );
                }
            });


           form.on('select(linktype)', function(data) {
                var slval = data.value;
                if(slval=="None"){
                     $('.linkurl').show();
                     $('.channelUrl').hide();
                }else if(slval=="LinkToFirstChannel" || slval=="LinkToFirstContent" || slval=="LinkToOnlyOneContent" || slval=="NoLink"){
                     $('.linkurl').hide();
                     $('.channelUrl').hide();
                }else if(slval=="LinkToChannel"){
                     $('.linkurl').hide();
                     $('.channelUrl').show();
                }
            });

            window.submitForm = function () {
                $("#channel-submit").click();
            }

            form.on('submit(channel-submit)', function (data) {

                let groupname = [];
                $('input[name="GroupName"]').each(function () {
                    if ($(this).prop('checked')) {
                        groupname.push($(this).val());
                    }
                });
                data.field.GroupNames = groupname.join(',');

                var imgsids = [];
                $('#uploader-list .file-iteme').each(function () {
                    imgsids.push($(this).prop("id"));
                });
                data.field.ImageUrlIds = imgsids.join(',');
                data.field.Content = edit.getContent();
                if(data.field.LinkType=="LinkToChannel"){
                    data.field.LinkUrl = data.field.ChannelUrl;
                }
                var field = data.field;

                var waitIndex = parent.layer.load(2);
                lscom.ajax({
                    url: "/Cms/Channel/SaveData",
                    data: JSON.stringify(field),
                    lsHandleError: false
                }).done(function (data) {
                    if (data.code == 0) {
                        data.index = index;
                        let parentWindow = parent.selectedWindow().window;
                        parentWindow.saveCallback(data);
                    }
                }).fail(function (message) {
                    lscom.notify.error(message);
                }).always(function () {
                    parent.layer.close(waitIndex);
                });
                return false;
            });
        });
    </script>

}

